<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html>
<head>
    <title th:text="${configurations.get('websiteName')}+' | '+${pageName}">详情页</title>
    <meta name="description" th:content="${configurations.get('websiteDescription')}">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" th:href="@{${configurations.get('websiteIcon')}}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/X-admin/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/blog/amaze/css/base.css}">
    <link rel="stylesheet" th:href="@{/X-admin/editormd/css/editormd.preview.css}" />
    <style>
        pre code {
            white-space: pre;
        }

        blockquote {
            border-left: 4px solid #42b983;
            padding: 10px 0px 10px 15px;
            color: #777;
            background-color: rgba(66, 185, 131, .1);
            max-width: 890px;
        }
    </style>

</head>
<body>
<div th:replace="blog/amaze/header::nav-fragment"></div>
<header th:fragment="header-fragment" class="intro-header"
        th:style="'background-image:url(' + @{/blog/amaze/images/header.jpg} + ');'">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1 th:text="${blogDetailVO.blogTitle}"></h1>
                    <span class="meta">
                        <th:block th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"></th:block> &nbsp;
                            <div class="comments-view" style="display: inline-block">
                                <a href="#comments" class="article-comments"><th:block
                                        th:text="${blogDetailVO.commentCount}"></th:block>条评论</a> &nbsp;
                                <th:block th:text="${blogDetailVO.blogViews}"></th:block>浏览
                            </div>
                            </span>
                    <div class="tags post-tags">
                        <th:block th:each="tag : ${tagList}">
                            <a class="tag" rel="tag" th:href="@{'/tag/' + ${tag.tagId}}">
                                <th:block th:text="${tag.tagName}"></th:block>
                            </a>&nbsp;
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="am-g am-g-fixed blog-fixed">
        <div class="am-u-lg-12 am-u-sm-12">
            <article id="test-markdown-view">
<!--                <textarea th:utext="${blogDetailVO.blogContent}"/>-->
            </article>
            <aside class="blog-rights clearfix">
                <p>本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
            </aside>
            <hr>
        </div>
    </div>
    <th:block th:if="${blogDetailVO.commentCount != 0}">
        <div id="volume" class="volume">
            全部留言 <span th:text="${blogDetailVO.commentCount}"></span>
        </div>
        <aside class="comments" id="comments">
            <div id="list-cont" class="list-cont">
            </div>
            <div id="paging" style="text-align: center;"></div>
        </aside>
    </th:block>
    <th:block th:if="${blogDetailVO.enableComment==0}">
        <div class="layui-form layui-form-pane">
            <h2><i class="fa fa-pencil"></i> 添加评论</h2>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="hidden" id="blogId" autocomplete="off" th:value="${blogDetailVO.blogId}"/>
                    <input type="text" id="commentator" autocomplete="off" placeholder="必填,1-6个字符" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" id="email" autocomplete="off" placeholder="必填" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">网站地址</label>
                <div class="layui-input-block">
                    <input type="text" id="websiteUrl" autocomplete="off" placeholder="可不填" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">评论内容</label>
                <div class="layui-input-block">
                    <textarea id="commentBody" placeholder="既然来了,不如说几句" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button type="submit" class="layui-btn" id="commentSubmit">提交</button>
            </div>
        </div>
    </th:block>
    <p class="back-top" id="back-top" style="display:none"><a href="#top"><span></span></a></p>
</div>
<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>
<script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script>

<script src="/X-admin/editormd/lib/marked.min.js"></script>
<script src="/X-admin/editormd/lib/prettify.min.js"></script>
<script src="/X-admin/editormd/lib/raphael.min.js"></script>
<script src="/X-admin/editormd/lib/underscore.min.js"></script>
<script src="/X-admin/editormd/lib/sequence-diagram.min.js"></script>
<script src="/X-admin/editormd/lib/flowchart.min.js"></script>
<script src="/X-admin/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/X-admin/editormd/src/editormd.js"></script>

<script th:src="@{/blog/plugins/comment/valid.js}"></script>
<script th:src="@{/blog/plugins/comment/comment.js}"></script>
<!-- sweetalert -->
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<!-- 评论 -->
<script th:src="@{/X-admin/lib/layui/layui.all.js}"></script>
<script th:inline="javascript">
    ;!function () {
        var laypage = layui.laypage,
            $ = layui.$;

        var count = [[${blogDetailVO.commentCount}]];

        initBlogList(1, 5, [[${blogDetailVO.blogId}]]);

        testEditormdView = editormd.markdownToHTML("test-markdown-view", {
            htmlDecode      : "style,script,iframe",
            emoji           : true,
            taskList        : true,
            tex             : true,
            flowChart       : true,
            sequenceDiagram : true,
            markdown        : [[${blogDetailVO.blogContent}]]
        });

        // 初始化评论列表
        function initBlogList(page, limit, blogId) {
            laypage.render({
                elem: 'paging'
                , count: count
                , limit: 5
                , jump: function (obj, first) {
                    $.get('/blog/listComment',
                        {
                            page: obj.curr,
                            limit: obj.limit,
                            blogId: blogId
                        }, function (res) {
                            var strVal = "";
                            Array.from(res.data).forEach((value) => {
                                strVal += `<div class="cont">
                                    <div class="img">
                                        <img src="/blog/amaze/images/wordImg.png" style="width:50px;" alt="">
                                        <p class="tit"><span class="name">${value.commentator}</span><span class="data">${value.commentCreateTime}</span></p>
                                    </div>
                                    <div class="text">
                                        <p class="ct">${value.commentBody}</p>
                                    </div>`;
                                if (value.replyBody !== "" && value.replyBody != null) {
                                    strVal += `<div class="cont" style="padding-left: 20px;">
                                      <div class="text">
                                        <p class="tit"><span class="name">回复</span><span class="data">${value.replyCreateTime}</span></p>
                                        <p class="ct">${value.replyBody}</p>
                                      </div></div>`
                                }
                                strVal += `</div><hr/>`;
                            });
                            $("#list-cont").html(strVal);
                        }
                    );
                }
            });
        }

        $("#back-top").hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });

        $('article h1, article h2, article h3, article h4, article h5').find('a').removeAttr('target')
    }();
</script>
</html>